<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:composite="http://java.sun.com/jsf/composite">
<head>
	<title>
		Accessible date picker.
		Edit date as 3 separated fields or more if time is used. See also ...web.component.DatePicker java class.
		Note that bean validation works!
		It was inspired from http://weblogs.java.net/blog/cayhorstmann/archive/2010/01/30/composite-input-components-jsf
	</title>
</head>
<body>
	<composite:interface componentType="components.DatePicker">
		<composite:attribute name="value" required="true" />
		<composite:attribute name="label" required="true" />
		<composite:attribute name="yearMin" required="false" default="1999" type="int" />
		<composite:attribute name="yearMax" required="false" default="2015" type="int" />
		<composite:attribute name="showDayOfWeek" required="false" default="false" type="boolean" />
		<composite:attribute name="timeRendered" required="false" default="false" type="boolean" />
		<composite:attribute name="disabled" required="false" default="false" type="boolean" />
	</composite:interface>

	<composite:implementation>
		<div id="#{cc.clientId}:div">
			<a id="#{cc.clientId}"  onfocus="APP.focusTo('#{cc.clientId}:day')" style="display: none"/>
			<h:selectOneMenu id="day" title="${msg.day} ${cc.attrs.label}" disabled="#{cc.attrs.disabled}">
				<f:selectItem itemLabel="${msg.day}" noSelectionOption="true" />			
				<f:selectItems value="#{datePickerHelper.getDays(cc.clientId, cc.attrs.showDayOfWeek)}" />
				<f:ajax event="change" />
			</h:selectOneMenu>

			<h:selectOneMenu id="month" title="${msg.month} ${cc.attrs.label}" disabled="#{cc.attrs.disabled}">
				<f:selectItem itemLabel="${msg.month}" noSelectionOption="true" />			
				<f:selectItems value="#{datePickerHelper.getMonths()}" />
				<f:ajax event="change" render="day" />
			</h:selectOneMenu>

			<h:selectOneMenu id="year" title="${msg.year} ${cc.attrs.label}" disabled="#{cc.attrs.disabled}">
				<f:selectItem itemLabel="${msg.year}" noSelectionOption="true" />			
				<f:selectItems
					value="#{datePickerHelper.getYears(cc.attrs.yearMin, cc.attrs.yearMax)}" />
				<f:ajax event="change" render="day" />
			</h:selectOneMenu>

			<h:outputText value=" : " rendered="#{cc.attrs.timeRendered}"/>

			<h:selectOneMenu id="hour" title="${msg.hour} ${cc.attrs.label}" rendered="#{cc.attrs.timeRendered}" disabled="#{cc.attrs.disabled}">
				<f:selectItem itemLabel="${msg.hour}" noSelectionOption="true" />
				<f:selectItems value="#{datePickerHelper.getHours()}" />
			</h:selectOneMenu>

			<h:selectOneMenu id="minute" title="${msg.minute} ${cc.attrs.label}" rendered="#{cc.attrs.timeRendered}" disabled="#{cc.attrs.disabled}">
				<f:selectItem itemLabel="${msg.minute}" noSelectionOption="true" />
				<f:selectItems value="#{datePickerHelper.getMinutes()}" />
			</h:selectOneMenu>
		</div>
	</composite:implementation>
</body>
</html>